<template>
  <view class="content">
    <div class="swiper1">
      <swiper
        class="swiper"
        indicator-color="#8fb9fd"
        indicator-active-color="#ffffff"
        circular
        :indicator-dots="indicatorDots"
        autoplay="true"
        :interval="interval"
        :duration="duration">
        <swiper-item>
          <view
            class="swiper-item uni-bg-red"
            @click="zb"
            >就诊指南</view
          >
        </swiper-item>
        <swiper-item>
          <view
            class="swiper-item uni-bg-green"
            @click="zf"
            >停诊通知</view
          >
        </swiper-item>
        <swiper-item>
          <view
            class="swiper-item uni-bg-blue"
            @click="nh"
            >医院导航</view
          >
        </swiper-item>
        <swiper-item>
          <view
            class="swiper-item uni-bg-blue"
            @click="hg"
            >预约须知</view
          >
        </swiper-item>
      </swiper>
    </div>
    <!-- 门诊服务 -->
    <div class="twocenter">
      <div class="headtitle">
        <div class="u298_div"></div>
        <div class="server">门诊服务</div>
      </div>
      <div
        class="mainserver"
        style="margin: 10px 10px">
        <div
          class="kijleft"
          @click="appointmentregister">
          <div style="text-align: left; padding-left: 10px">
            <div
              style="
                font-size: 17px;
                color: rgba(244, 99, 99, 0.99);
                margin-bottom: 10px;
                letter-spacing: 2px;
              ">
              预约挂号
            </div>
            <div
              style="
                font-size: 12px;
                color: rgba(244, 99, 99, 0.99);
                letter-spacing: 2px;
              ">
              在线挂号预约
            </div>
          </div>
          <div>
            <img
              src="@/static/booked.png"
              alt=""
              style="width: 40px; height: 40px" />
          </div>
        </div>
        <div
          class="kijleft"
          @click="topup">
          <div style="text-align: left; padding-left: 10px">
            <div
              style="
                font-size: 17px;
                color: #59dd93;
                margin-bottom: 10px;
                letter-spacing: 2px;
              ">
              在线充值
            </div>
            <div style="font-size: 12px; color: #59dd93; letter-spacing: 2px">
              就诊卡预存充值
            </div>
          </div>
          <div>
            <img
              src="@/static/refill.png"
              alt=""
              style="width: 40px; height: 40px" />
          </div>
        </div>
      </div>
      <div class="nav">
        <div
          class="zp"
          @click="waittoseethedoctor">
          <div>
            <img
              src="@/static/waittosee.png"
              alt="" />
          </div>
          <div class="titletop">候诊查询</div>
        </div>
        <div
          class="zp"
          @click="pay">
          <div>
            <img
              src="@/static/payment.png"
              alt="" />
          </div>
          <div class="titletop">自动缴费</div>
        </div>
        <div
          class="zp"
          @click="cost">
          <div>
            <img
              src="@/static/outpatient.png"
              alt="" />
          </div>
          <div class="titletop">门诊费用</div>
        </div>
        <div
          class="zp"
          @click="refund">
          <div>
            <img
              src="@/static/refund.png"
              alt="" />
          </div>
          <div class="titletop">在线退款</div>
        </div>
      </div>
      <div
        class="nav"
        style="margin-top: 10px">
        <div
          class="zp"
          @click="toreport">
          <div>
            <img
              src="@/static/report.png"
              alt="" />
          </div>
          <div class="titletop">报告查询</div>
        </div>
        <div
          class="zp"
          @click="tocase">
          <div>
            <img
              src="@/static/case.png"
              alt="" />
          </div>
          <div class="titletop">病例查询</div>
        </div>
        <div
          class="zp"
          @click="tonat">
          <div>
            <img
              src="@/static/nucleicacid.png"
              alt="" />
          </div>
          <div class="titletop">核酸检测</div>
        </div>
        <div
          class="zp"
          @click="topes">
          <div>
            <img
              src="@/static/physicalexamination.png"
              alt="" />
          </div>
          <div class="titletop">体检服务</div>
        </div>
      </div>
    </div>

    <!-- 住院服务 -->
    <div class="twocenter">
      <div class="headtitle">
        <div class="u298_div"></div>
        <div class="server">住院服务</div>
      </div>
      <div class="nav">
        <div class="zp" @click="charge">
          <div>
            <img
              src="@/static/hospitalization.png"
              alt="" />
          </div>
          <div class="titletop">住院充值</div>
        </div>
        <div class="zp" @click="recharge">
          <div>
            <img
              src="@/static/hospmoney.png"
              alt="" />
          </div>
          <div class="titletop">住院费用</div>
        </div>
        <div class="zp" @click="list">
          <div>
            <img
              src="@/static/daymoney.png"
              alt="" />
          </div>
          <div
            class="titletop"
            style="font-size: 11px">
            住院日清单
          </div>
        </div>
        <div class="zp" @click="send">
          <div>
            <img
              src="@/static/send.png"
              alt="" />
          </div>
          <div class="titletop">病案寄送</div>
        </div>
      </div>
    </div>

    <!-- 医院服务 -->
    <div
      class="twocenter"
      style="margin-bottom: 20px">
      <div class="headtitle">
        <div class="u298_div"></div>
        <div class="server">医院服务</div>
      </div>
      <div class="nav">
        <div
          class="zp"
          @click="introduce">
          <div>
            <img
              src="@/static/introduce.png"
              alt="" />
          </div>
          <div class="titletop">医院介绍</div>
        </div>
        <div
          class="zp"
          @click="navigation">
          <div>
            <img
              src="@/static/navigation.png"
              alt="" />
          </div>
          <div class="titletop">医院导航</div>
        </div>
        <div
          class="zp"
          @click="fingerpost">
          <div>
            <img
              src="@/static/compass.png"
              alt="" />
          </div>
          <div class="titletop">就医指南</div>
        </div>
        <div
          class="zp"
          @click="encyclopedia">
          <div>
            <img
              src="@/static/encyclopedia.png"
              alt="" />
          </div>
          <div class="titletop">健康百科</div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
	import {request} from '@/util/https.js'
export default {
  data() {
    return {
      background: ["color1", "color2", "color3"],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
    };
  },
  methods: {
	  one(){
	  			request(
	  			"/name",{},
	  			"GET",
	  			function(res){
	  				console.log(res)
	  			}
	  			)
	  },
	  charge(){
		  uni.navigateTo({
		  	url:"../../hospitalizationServices/pages/charge/charge"
		  })
	  },
	  list(){
		  uni.navigateTo({
		  	url:"../../hospitalizationServices/pages/list/list"
		  })
	  },
	  recharge(){
	  		  uni.navigateTo({
	  		  	url:"../../hospitalizationServices/pages/recharge/recharge"
	  		  })
	  },
	  send(){
	  		  uni.navigateTo({
	  		  	url:"../../hospitalizationServices/pages/send/send"
	  		  })
	  },
    refund() {
      uni.navigateTo({
        url: "../../nav/pages/refund/refund",
      });
    },
    cost() {
      uni.navigateTo({
        url: "../../nav/pages/cost/cost",
      });
    },
    pay() {
      uni.navigateTo({
        url: "../../nav/pages/pay/pay",
      });
    },
    waittoseethedoctor() {
      uni.navigateTo({
        url: "../../nav/pages/waittoseethedoctor/waittoseethedoctor",
      });
    },
    topup() {
      uni.navigateTo({
        url: "../../outpatientservice/pages/topup/topup",
      });
    },
    appointmentregister() {
      uni.navigateTo({
        url: "../../outpatientservice/pages/appointmentregister/appointmentregister",
      });
    },
    hg() {
      uni.navigateTo({
        url: "../../hospital/pages/appointmentsend/appointmentsend",
      });
    },
    nh() {
      uni.navigateTo({
        url: "../../hospital/pages/navigatio/navigatio",
      });
    },
    zf() {
      uni.navigateTo({
        url: "../../hospital/pages/suspendmedicalservice/suspendmedicalservice",
      });
    },
    zb() {
      console.log(1);
      uni.navigateTo({
        url: "../../hospital/pages/hospital1/hospital1",
      });
    },
    toreport() {
      console.log(1);
      uni.navigateTo({
        url: "../../query/page/ReportQuery/ReportQuery",
      });
    },
    tocase() {
      console.log(1);
      uni.navigateTo({
        url: `../../query/page/CaseInquiry/CaseInquiry?id=1`,
      });
    },
    tonat() {
      console.log(1);
      uni.navigateTo({
        url: "../../query/page/NAT/NAT",
      });
    },
    topes() {
      console.log(1);
      uni.navigateTo({
        url: "../../query/page/PES/PES",
      });
    },
    introduce() {
      console.log(2);
      uni.navigateTo({
        url: "../../service/pages/introduce/introduce",
      });
    },
    navigation() {
      console.log(3);
      uni.navigateTo({
        url: "../../service/pages/navigation/navigation",
      });
    },
    fingerpost() {
      console.log(4);
      uni.navigateTo({
        url: "../../service/pages/fingerpost/fingerpost",
      });
    },
    encyclopedia() {
      console.log(5);
      uni.navigateTo({
        url: "../../service/pages/encyclopedia/encyclopedia",
      });
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
  },mounted() {
  	this.one()
  }
};
</script>

<style>
.kijleft {
  display: flex;
  align-items: center;
}
.kijleft > div:nth-child(1) {
  flex: 2;
}
.kijleft > div:nth-child(2) {
  flex: 1;
}
.mainserver > div:nth-child(1) {
  background-color: #fceff0;
}
.mainserver > div:nth-child(2) {
  background-color: #e9faf2;
}
.mainserver > div {
  padding: 15px 5px;
  flex: 1;
  margin-right: 10px;
  background-color: red;
}
.mainserver {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.titletop {
  margin-top: 5px;
}
.zp img {
  width: 32px;
  height: 32px;
}
.content {
  background-color: #fdfeff;
}
.nav {
  display: flex;
  width: 100%;
  padding: 0px 15px;
}
.nav > div {
  padding: 5px;
  font-size: 13px;
  color: #929292;
  flex: 1;
  background-color: #ffffff;
  margin: 0 5px;
  border: 2px solid #f2f2f2;
}
.server {
  font-size: 17px;
  font-weight: 500;
  margin-left: 20px;
}
.headtitle {
  padding: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.u298_div {
  border-width: 0px;
  width: 16px;
  height: 6px;
  background: inherit;
  background-color: rgba(0, 110, 255, 1);
  border: none;
  border-radius: 4px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 16px;
  color: #006eff;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.swiper1 {
  padding: 20px;
  overflow: hidden;
  border-radius: 80px;
}
.content {
  width: 100%;
  text-align: center;
}
.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}
.swiper {
  height: 300rpx;
  background: linear-gradient(to right, #0a72ff, #3f85fc, #789afa);
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 26px;
  letter-spacing: 6px;
  color: #ffffff;
}
.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}
.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}
.info {
  position: absolute;
  right: 20rpx;
}
.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
</style>
